<template>
  <a-modal
    title="计划停机类型设置"
    :width="640"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :maskClosable="false"
    :keyboard="false"
    :footer="null"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading" class="wrapper">
      <a-form :form="form" layout="inline">

        <template v-for="item in planTypes">
          <a-tag
            class="hc-tag"
            :key="item.id"
            :closable="true"
            @close="(e)=>handleDelete(e,item.id)"
          >{{ item.name }}</a-tag>
        </template>

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validator.nameValidProps">

          <div class="input-wrapper" v-if="inputVisible">
            <s-input
              ref="input"
              type="text"
              :style="{ width: '150px' }"
              maxlength="8"
              :limit="8"
              v-decorator="['name', {
                rules: [
                  { required: true, whitespace: true, message: '类型名称不能为空' },
                  { validator: validator.nameValidator }
                ],
                initialValue:''
              }]"
            />
            <a-icon class="edit-icon" type="check" @click="handleInputConfirm" />
            <a-icon class="edit-icon" type="close" @click="handleInputClose" />
          </div>
          <a-tag class="hc-tag add-btn" v-else @click="handleAddClick">
            <a-icon type="plus" /> 新建
          </a-tag>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { createPlanType, deletePlanType, validatePlanTypeField } from '@/api/shift';
import { asyncValidateMixin } from '@/utils/mixin';
import { SInput } from '@/components';

export default {
  name: 'PlanTypeForm',
  mixins: [asyncValidateMixin],
  components: {
    SInput
  },
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 24 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 24 }
      },
      visible: false,
      confirmLoading: false,
      inputVisible: false,
      form: null
    };
  },
  computed: {
    planTypes () {
      return this.$store.getters.planTypes;
    }
  },
  created () {
    this.form = this.$form.createForm(this, { name: 'PlanTimeForm' });
    this.$_asyncValidateMixin_init([
      {
        fieldName: 'name',
        caller: validatePlanTypeField
      }
    ]);
  },
  methods: {
    edit () {
      this.visible = true;
    },

    handleDelete (e, id) {
      e.preventDefault();
      this.$confirm({
        title: '删除计划停机类型',
        content: '确认要删除该计划停机类型吗？',
        onOk: () => {
          this.confirmLoading = true;
          return deletePlanType({ id })
            .then(res => {
              this.confirmLoading = false;
              if (res.code === 200) {
                const newPlanTypes = this.planTypes.filter(item => item.id !== id);
                this.$message.success(res.message);
                this.$store.commit('SET_PLAN_TYPES', newPlanTypes);
              }
            })
            .catch(() => {
              this.confirmLoading = false;
            });
        }
      });
    },

    handleAddClick () {
      this.inputVisible = true;
      this.$nextTick(() => {
        this.$refs.input.focus();
      });
    },

    handleInputConfirm () {
      const {
        form: { validateFields, getFieldsValue }
      } = this;
      this.confirmLoading = true;
      const fieldNames = this.$_asyncValidateMixin_fieldsFilter(getFieldsValue());
      validateFields(fieldNames, (errors, values) => {
        if (!errors) {
          const { name } = this.form.getFieldsValue();
          const params = {
            name: name.trim()
          };
          createPlanType(params)
            .then(res => {
              this.confirmLoading = false;
              this.$store.commit('SET_PLAN_TYPES', res.data);
              this.$message.success(res.message);
              this.handleInputClose();
            })
            .catch(() => {
              this.confirmLoading = false;
            });
        } else {
          this.confirmLoading = false;
        }
      });
    },

    handleInputClose () {
      this.inputVisible = false;
      this.name = '';
    },

    handleCancel () {
      this.visible = false;
      this.handleInputClose();
    }
  }
};
</script>

<style lang="less" scoped>
.wrapper {

  min-height: 100px;

  .edit-icon {
    margin-left: 15px;
    cursor: pointer;
  }
  .add-btn {
    background: #fff;
    border-style: dashed;
  }
  .input-wrapper {
    display: inline-block;
  }
}
</style>

<style lang="less">
.hc-tag,
.hc-tag-default {
  &.ant-tag {
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    padding: 0 10px;
    margin-top: 4px;
    .anticon {
      margin-left: 5px;
    }
  }
}
.hc-tag-large {
  &.ant-tag {
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    padding: 0 12px;
    .anticon {
      margin-left: 7px;
    }
  }
}
</style>
